<template>
    <div class="app-container">
        <el-dialog :title="dlgTitle" ref="dlg" :visible.sync="dialogFormVisible" width="420px" :close-on-click-modal="false">
            <el-form :rules="rules" ref="dataForm" :model="dlgRecord" label-position="right" label-width="100px" size="small" style='width: 90%; margin-left:10px;'>
                <el-form-item label="角色编号："  prop="id">
                    <el-input v-model="dlgRecord.id" placeholder="请输入(具有唯一性)" :disabled="true"></el-input>
                    </el-form-item>
                <el-form-item label="角色名称：" prop="name">
                    <el-input v-model="dlgRecord.name" placeholder="请输入(具有唯一性)"></el-input>
                </el-form-item>
                <el-form-item label="复制角色：" v-if="dlgRecord.add">
                    <el-select  v-model="dlgRecord.quote" clearable placeholder="请选择" width="100%" >
                        <el-option v-for="(item,i) in copyRoleList" :key="i" :label="item.label" :value="item.id"></el-option>                         
                    </el-select>
                    <div style="margin-top:0px;text-align:center;color:#AA1111;">注：新角色只复制其基本权限</div>
                </el-form-item>
                <el-form-item v-if="dlgRecord.add" label="角色等级：" prop="Class">
                    <el-select  v-model="dlgRecord.Class" placeholder="请选择" width="100%" >
                        <el-option v-for="(item,i) in  addReadyData.level" :key="i" :label="item" :value="item"></el-option>                         
                    </el-select>  
                </el-form-item>
                <el-form-item label="简介：" >
                    <el-input type="textarea" rows="4" v-model="dlgRecord.info" placeholder="请输入"></el-input>
                </el-form-item>   
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DlgCancel">取消</el-button>
                <el-button :disabled="this.isSubitime" type="primary" @click="SaveRecord">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { 
  getAddReadyData,
  saveCompany,
  updatedata 
} from '@/api/user';

export default {
  data() {
    return {
      copyRoleList:[],//已有角色列表
      dlgTitle:'角色登记',
      dialogFormVisible:false,
      isSubitime:false,//判断点击保存
      dlgRecord: {
        add:true,     //表示添加
        id: '',    //角色ID
        name: '',  //角色名称
        Class: '', //角色级别，不是分层的
        quote: '', //被引用的角色
        info:''    //角色简介
      },
      addReadyData:{
        idList:[],
        nameList:'',//已有名称串
        quoteList:[], //已有角色，可引用
        level:0
      },
      rules: {
        name: [
          { required: true, message: '名称必填' },
          {
            validator: (rule, value, callback) => {
              if (this.addReadyData.nameList.indexOf('|'+value+'|') >= 0) {
                callback(new Error('已存在'));
              } else callback();
            },
            trigger: 'blur'
          }
        ],
        Class: [{required: true}]
      }
    };
  },

  methods: {
    AddRecord(data) {
      this.copyRoleList=data; //存储传过来的已有角色列表
      this.addReadyData.nameList='';
      getAddReadyData().then(rsp=>{
        this.AddSetdlgRecord(rsp.data);
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate();
        });
      })
        .catch(()=>{
          this.$message.error('获取数据失败！');
        });
    },
    DlgCancel() {
      this.dialogFormVisible = false;
    },
    AddSetdlgRecord(data){
      this.dlgTitle='角色登记';
      this.dlgRecord={
        add:true,     //表示添加
        id: '',    //角色ID
        name: '',  //角色名称
        Class: '', //角色级别，不是分层的
        quote: '', //被引用的角色
        info:''    //角色简介
      };
      this.dlgRecord.id=data.gpid+1;
      this.addReadyData.level=data.level;

      this.addReadyData.nameList=data.roleList.nameList;
    },
    SaveRecord(){
      this.$refs.dataForm.validate((valid) => {             
        if (valid) {  
          this.isSubitime=true;                                           
          saveCompany(this.dlgRecord).then((rsp) => {
            if(rsp.errcode===0)
            { 
              this.isSubitime=false;
              this.dialogFormVisible = false;
              this.$message.success(this.$refs.dlg.title+'成功!');
              this.$emit('Refresh');
            }
            else{
              this.isSubitime=false;
              this.$message.error(rsp.errmsg);
            }
          });
        }
      });

    },
    UpdateRecord(id){
      this.dlgTitle='角色修改';
      this.dlgRecord.add=false;
      this.dlgRecord.quote=0; //此数据不用
      this.dlgRecord.id=id;
      updatedata(id).then(srp=>{
        if(srp.errcode===0)
        {
          this.dlgRecord.name=srp.data.data.GroupName;
          this.dlgRecord.Class=srp.data.data.GroupLevel;
          this.dlgRecord.info=srp.data.data.GroupInfo;
          this.addReadyData.nameList=srp.data.nameList.nameList;
        }//console.log("nameList",this.addReadyData.nameList);
      });      
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate();
      });
    },
  },

};
</script>